<%--
  Created by IntelliJ IDEA.
  User: 86176
  Date: 2020/4/23
  Time: 22:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息新增</title>
    <%--    引入jquery资源文件：必须在bootstrap资源文件之前引入--%>
    <script type="text/javascript" src="jquery-1.12.4/jquery-1.12.4.js"></script>
    <%--    引入bootstrap的资源文件--%>
    <script type="text/javascript" src="bootstrap-3.3.6-dist/js/bootstrap.js"></script>
    <link  rel="stylesheet" type="text/css" href="bootstrap-3.3.6-dist/css/bootstrap.css">
    <%--    分页插件的使用--%>
    <link rel="stylesheet" type="text/css" href="paginationjs-master/dist/pagination.css">

    <script language="javascript" type="text/javascript" src="paginationjs-master/dist/pagination.min.js"></script>

    <script type="text/javascript">

        function doAjaxFileUpload() {
            console.log("正准备执行ajax请求");

            // 获取form表单中的输入框控件的值

            console.log("#formQuery.serialize():::::::::::::::")
            console.log($("#formAdd").serialize())
            // 结果串：userName=user&userAddress=&userTel=&userRegDate=&userRegDate2=
            var form1 = $('#formAdd')[0];
            console.log(document.getElementById("formAdd"));
            console.log(document.forms[0]);
            // 使用ajax进行文件上传
            // 获取form对象（含有文件流对象）
            // ajax引擎进行文件上传处理需要使用 FormData 对象作为载体发送文件字节流对象到服务器
            // 需要使用form对象来初始化一个FormData对象

            var formData = new FormData($("#formAdd")[0]);

            // ajax处理
            $.ajax({
                type: "post", // 指明request请求类型为post请求
                url: "UserInfoAddWithAjaxFileUploadServlet", // 请求的url，form表单的action属性的值
                data: formData,// 使用FormData作为含有文件流对象的载体
                // 使用FormData对象作为ajax发送服务器的数据载体，需要设置以下两个参数
                contentType:false, // 防止request请求自动处理ForamData对象，如果进行处理，则会丢失文件流对象
                processData:false, // 防止request请求自动处理ForamData对象，如果进行处理，则会丢失文件流对象
                dataType: "json", // 指明服务器发回的响应内容的格式 Json【服务器发给ajax引擎的是json字符串，jquery将json字符串转换为json对象】
                success: function (data) { // ajax引擎执行成功之后的回调函数处理【符合条件：xmlhttp.readyState == 4 && xmlhttp.status == 200】
                    console.log("ajax查询结果：");
                    console.log(data);
                    // 手动清空form表单数据
                    //通过form表单的dom对象的reset方法来清空
                    $('#formAdd')[0].reset();
                    // 如果执行的是submit()方法，则表示将表单提交给服务器请求，等价于点击一个  submit类型的按钮
                    //document.getElementById("formAdd").reset();

                    //alert(data);
                    // 局部刷新浏览器：使用js操作页面标签对象进行显示【dom操作】
                    // data 是 json对象，且不为空
                    if (data) {
                        // 使用分页插件对查询结果集  data 进行分页显示
                        $("#mypager").pagination({
                            dataSource: data,// 查询的所有的数据都在data中，pagination插件对所有的数据集合进行分页处理
                            pageSize: 5,
                            showGoInput: true,
                            showGoButton: true,
                            callback: function(eachPageData, pagination) {  // eachPageData是分页插件从所有的数据集合中获取的当前页要显示的数据集结
                                // template method of yourself
                                // 拼接要显示的内容的html
                                var showDom = "";
                                // juery的each函数进行json数组对象的循环遍历list集合【json数组】
                                /*
                                 * each函数：第一个参数是被遍历的集合对象；
                                 *           第二个参数是被遍历元素进行的回调处理；
                                 *                  该参数是一个回调函数，该函数的第一个参数是当前被遍历的元素的下标；
                                 *                                                第二个参数就是当前被遍历的元素对象；
                                 */
                                $.each(eachPageData, function (i, eachBean) {
                                    // 将要显示的内容进行html内容拼接
                                    showDom += "<tr>";

                                    showDom += "<th scope=\"row\">";
                                    showDom += (i + 1);
                                    showDom += "</th>";

                                    showDom += "<td>";
                                    showDom += eachBean["userName"];
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += eachBean.userAddress;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += eachBean.userTel;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += eachBean.userRegDate;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += "<img src='";
                                    showDom += eachBean.userImg;
                                    showDom += "' style='width: 40px;height: 30px'>";
                                    showDom += "</td>";

                                    showDom += "</tr>";
                                });

                                // 将要显示的html内容，赋值给tbody标签
                                $("#showData").html(showDom);
                            }
                        })
                    }
                }
            });
        }

    </script>
</head>
<body>
<div style="padding-top: 20px">
    <%--    enctype="multipart/form-data" 该属性使request请求数据包中可以包含二进制的文件流对象--%>
    <form class="form-horizontal" id="formAdd" enctype="multipart/form-data">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入姓名">
            </div>

            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userAddress" name="userAddress" placeholder="请输入地址">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">密码</label>
            <div class="col-sm-4">
                <input type="password" class="form-control" id="userPsw" name="userPsw" placeholder="请输入密码">
            </div>

            <label class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-4">
                <input type="password" class="form-control" id="userPsw2" placeholder="Password">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">联系电话</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userTel" name="userTel" placeholder="请输入联系电话">
            </div>

            <label class="col-sm-2 control-label">注册日期</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userRegDate" name="userRegDate" placeholder="请输入注册日期">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">头像</label>
            <div class="col-sm-4">
                <%--                form表单中如果含有了file类型的控件，需要使用enctype属性，否则表达无法正常发送请求   --%>
                <input type="file" class="form-control" id="userImg" name="userImg" placeholder="请选择上传文件">
            </div>


        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" onclick="doAjaxFileUpload()">新增</button>
            </div>
        </div>

    </form>

</div>

<div style="width: 90%;margin: 10px auto">
    <div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>地址</th>
                <th>联系电话</th>
                <th>注册日期</th>
                <th>头像</th>
            </tr>
            </thead>

            <%--            ajax查询结果集显示的控件--%>
            <tbody id="showData">

            </tbody>
        </table>
        <%--        分页栏显示的位置--%>
        <div id="mypager"></div>
    </div>
</div>
</body>
</html>